<template>
  <div>
    <el-card class="box-card" style="width: 100%; height: 15%">
      <el-form
        @submit.native.prevent
        @keyup.enter.native="handleSerach()"
        :inline="true"
        class="demo-form-inline"
      >
        <el-form-item label="商家信息">
          <el-input v-model="keyword" placeholder="商家"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSerach()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handAdd">添加商家</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 弹出的模态框 -->
    <el-dialog
      style="text-align: center"
      title="商家信息"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="formData">
        <el-form-item label="商家名" label-width="70px">
          <el-input
            v-model="formData.ShopName"
            autocomplete="off"
            style="width: 25vw"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址" label-width="70px">
          <el-input
            v-model="formData.ShopAddress"
            autocomplete="off"
            style="width: 25vw"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" label-width="70px">
          <el-input
            v-model="formData.ShopPhone"
            autocomplete="off"
            style="width: 25vw"
          ></el-input>
        </el-form-item>
        <el-form-item label="供应商名" label-width="70px">
          <el-input
            v-model="formData.SuppliersName"
            autocomplete="off"
            style="width: 25vw"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handSave">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="id" width="60">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商家名称" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.shopName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商家地址" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.shopAddress }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.shopPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="供应商名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.suppliersName
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商家状态" width="150">
        <template slot-scope="scope">
          <el-switch
            active-text="正常"
            inactive-text="禁用"
            v-model="scope.row.isActived"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false"
            @change="change(scope.row.id, scope.row.isActived)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.createdTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="block">
      <el-pagination
        background
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        layout="prev, pager, next, jumper,sizes, total"
        :total="pager.rowsTotal"
        @current-change="handlePageIndexChange"
        @size-change="handlePageSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>


<script>
import { GetShop,PutStatus,PutShop,DeleteShop,addShop } from "../api/shops";

export default {
  data() {
    return {
      //数据表格的数据元
      tableData: [],

      //模态框默认状态不显示
      dialogFormVisible: false,

      //模态框绑定的信息
      formData: {
        ShopName: "",
        ShopAddress: "",
        ShopPhone: "",
        SuppliersName: "",
      },

      //搜索框绑定的信息
      keyword: "",
      //分页
      pager: {
        pageIndex: 1, // 页码
        pageSize: 10, // 页面大小（每页项目的数量）
        rowsTotal: 30, // 总记录数
      },
    };
  },
  methods: {
    //状态点击方法
    change(id, isActived) {
      let arr = {
        id: id,
        isActived: isActived,
      };
      PutStatus(arr).then((data) => {
        this.$message({
          showClose: true,
          message: data.data.msg,
          type: "success",
          center: true,
        });
      });
    },
    //模糊查询用户
    handleSerach() {
      this.fetchData();
    },
    handSave() {
      //判断有没有id 有id 则是更新
      if (this.formData.id !== undefined) {
        PutShop(this.formData.id,this.formData).then(({ data }) => {
          this.$message({
            showClose: true,
            message: data.msg,
            type: "success",
          });
          //重新拉取数据
          this.fetchData(this.pager);
        });
      } else {
        //没有id 并且 username 和 password 不为空时执行添加
        if (
          this.formData.ShopName !== ""
          && this.formData.ShopAddress !== ""
          && this.formData.ShopPhone !== ""
          && this.formData.SuppliersName !== ""
          ) {
          addShop(this.formData).then(() => {
            //将数据实时更新到前端页面
            this.fetchData(this.pager);
          });
          this.$message({
            showClose: true,
            message: "恭喜你，添加成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "用户名和密码不能为空",
            type: "warning",
          });
        }
      }
      this.dialogFormVisible = false;
    },
    handAdd() {
      //点击添加时将id制空 表示这是添加
      (this.formData.id = undefined),
        //每次添加时将模态框的数据清空
        (this.formData.ShopName = "");
      this.formData.ShopAddress = "";
      this.formData.ShopPhone = "";
      this.formData.SuppliersName = "";
      this.dialogFormVisible = true;
    },
    handleEdit(index, row) {
      //记录当前编辑行的下标，来实现前端页面的实时更新
      this.currentIndex = index;

      //点击编辑时将要编辑的行数据拉取过来
      this.formData.id = row.id;
      this.formData.ShopName = row.shopName;
      this.formData.ShopAddress = row.shopAddress;
      this.formData.ShopPhone = row.shopPhone;
      this.formData.SuppliersName = row.suppliersName;

      this.dialogFormVisible = true;
    },

    handleDelete(index, row) {
      //删除时执行的弹框
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
            center: true,
          });

          //根据id删除指定的行
          DeleteShop(row.id).then(() => {
            //删除数据后重新拉取数据
            this.fetchData(this.pager);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            center: true,
          });
        });
    },
    // 改变页码后，重新拉取数据
    handlePageIndexChange(val) {
      this.pager.pageIndex = val;
      this.fetchData(this.pager);
    },
    // 改变页大小后，重新拉取数据
    handlePageSizeChange(val) {
      this.pager.pageSize = val;
      this.fetchData(this.pager);
    },

    // 拉取数据方法
    fetchData() {
      let params = {
        keyword: this.keyword,
        pager: this.pager,
      };
      console.log(params);
      GetShop(params)
        .then(({ data }) => {
          console.log(data);
          let res = data.data;
          this.tableData = res.data;
          this.pager = res.pager;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

  mounted() {
    // 拉取数据
    this.fetchData(this.pager);
  },
};
</script>

<style>
.element.style {
  margin-left: 0px;
}

.el-dialog__footer {
  margin-right: 100px;
}

.el-dialog__body {
  align-content: center;
  justify-content: center;
  display: flex;
}
</style>